<script setup lang="ts">
import { inject, ref } from 'vue';
import * as injectKeys from "@/services/injectKeys";

import { BoxContainer, Container } from '@/models/containers';

interface TModelProps {
    offset: number
    target?: string
    position: 'top' | 'bottom',
}

const props = defineProps<{ model: Container }>()

const dynamicComponent = inject(injectKeys.dynamicComponentKey)!

const modelProps = props.model.props as TModelProps
const box: BoxContainer = props.model.children[0] as BoxContainer

</script>

<template>
    <el-affix :offset="modelProps.offset" :target="modelProps.target ?? undefined">
        <component :is="dynamicComponent" :component="box">
        </component>
    </el-affix>
</template>

<style scoped></style>